<template>
    <a-card>
        <div ref="d3CanvasRef" :style="{ height: canvasHeight + 'px', width: '100%' }">
            <svg ref="d3CanvasSvgRef" class="d3CanvasSvg"></svg>
        </div>
    </a-card>
</template>
  
<script setup >
import * as d3 from "d3";
import { initChart } from "@/api/canvas.ts";
import html2canvas from 'html2canvas';
const d3CanvasRef = ref(null)
const d3CanvasSvgRef = ref(null)
const canvasHeight = ref(900)
const $ = ref(undefined)
const props = defineProps({
    data: {
        type: Object,
    }
})
// 监听数据变化
watch(() => props.data, (newVal, oldVal) => {
    canvasHeight.value = props.data.length * 80
    if ($.value !== undefined) {
        const svgContainer = d3.selectAll(".d3CanvasSvg")
        svgContainer.selectAll("*").remove();
    }
    console.log(props.data)
    draw(props.data)

})
function draw(data) {
    let length = 0
    let deep = 0
    let num = 1
    data.map(res => {
        // res.fileUrl = `http://wellb.apisev.cn/ufs/download/${res.fileId}`
        res.fileUrl = `/dev-api/ufs/download/${res.fileId}`
        res.deep = deep
        deep = res.length + deep
        length = length + res.length
    })
    const containerWidth = d3CanvasRef.value.offsetWidth;
    $.value = initChart(d3.selectAll(".d3CanvasSvg"), containerWidth, canvasHeight.value);
    data.forEach((res, index) => {
        d3.xml(res.fileUrl)
            .then(xmlData => {
                const width = 10
                const height = 80 
                const svgX = 100
                //svg图片
                const svgElement = xmlData.documentElement;
                //画布
                const svgContainer = d3.selectAll(".d3CanvasSvg");
                svgElement.setAttribute("width", width);
                svgElement.setAttribute("height", height);
                svgElement.setAttribute("y", index * height);
                svgElement.setAttribute("x", svgX);
                //可更改svg尺寸
                svgElement.setAttribute("preserveAspectRatio", 'none meet');
                //讲svg添加到画布内
                svgContainer.node().appendChild(svgElement);
                /** 在右侧绘制高度对应的标尺 */
                const x = svgX + 80
                svgContainer
                    .append("line")
                    .attr("x1", x)
                    .attr("y1", index * height)
                    .attr("x2", x)
                    .attr("y2", index * height + height)
                    .attr("stroke", "black");
                svgContainer
                    .append("line")
                    .attr("x1", x - 10)
                    .attr("y1", index * height)
                    .attr("x2", x)
                    .attr("y2", index * height)
                    .attr("stroke", "black");
                /** 标尺对应仪器的文字描述 */
                /** 仪器名称 */
                svgContainer
                    .append('text')
                    .attr('x', x + 30)
                    .attr('y', (index * height) + (height / 2))
                    .attr('font-size', '12')
                    .text(`${res.instrumentName}`);
                /** 仪器实际位置 */
                svgContainer
                    .append('text')
                    .attr('x', x + 20)
                    .attr('y', (index * height) + 10)
                    .attr('font-size', '12')
                    .text(`${(length - res.deep).toFixed(4)}m`);
                /** 仪器长度 */
                svgContainer
                    .append('text')
                    .attr('x', x - 50)
                    .attr('y', (index * height) + (height / 2))
                    .attr('font-size', '12')
                    .text(`${res.length}m`);
                //如果包含声波添加扶正器
                if (res.instrumentName.includes("声波")) {
                    svgContainer
                        .append("line")
                        .attr("x1", x - 80)
                        .attr("y1", (index * height) + 10)
                        .attr("x2", x - 100)
                        .attr("y2", (index * height) + 10)
                        .attr("stroke", "black");
                    svgContainer
                        .append("line")
                        .attr("x1", x - 80)
                        .attr("y1", (index * height) + 70)
                        .attr("x2", x - 100)
                        .attr("y2", (index * height) + 70)
                        .attr("stroke", "black");
                    svgContainer
                        .append('text')
                        .attr('x', x - 150)
                        .attr('y', (index * height) + 15)
                        .attr('font-size', '12')
                        .text(`扶正器`);
                    svgContainer
                        .append('text')
                        .attr('x', x - 150)
                        .attr('y', (index * height) + 75)
                        .attr('font-size', '12')
                        .text(`扶正器`);
                }
                //如果包含补偿中子添加偏心器
                if (res.instrumentName.includes("补偿中子")) {
                    svgContainer
                        .append("line")
                        .attr("x1", x - 80)
                        .attr("y1", (index * height) + 10)
                        .attr("x2", x - 100)
                        .attr("y2", (index * height) + 10)
                        .attr("stroke", "black");
                    svgContainer
                        .append("line")
                        .attr("x1", x - 80)
                        .attr("y1", (index * height) + 70)
                        .attr("x2", x - 100)
                        .attr("y2", (index * height) + 70)
                        .attr("stroke", "black");
                    svgContainer
                        .append('text')
                        .attr('x', x - 150)
                        .attr('y', (index * height) + 15)
                        .attr('font-size', '12')
                        .text(`偏心器`);
                    svgContainer
                        .append('text')
                        .attr('x', x - 150)
                        .attr('y', (index * height) + 75)
                        .attr('font-size', '12')
                        .text(`偏心器`);
                }
                //如果总长度等于num ，证明到达最后一个仪器串
                if (props.data.length === num) {
                    svgContainer
                        .append("line")
                        .attr("x1", x - 10)
                        .attr("y1", num * height)
                        .attr("x2", x)
                        .attr("y2", num * height)
                        .attr("stroke", "black");
                    svgContainer
                        .append('text')
                        .attr('x', x + 20)
                        .attr('y', num * height)
                        .attr('font-size', '12')
                        .text(`${0}m`);
                }
                num++

            })
            .catch(error => {
                console.error("Error loading external SVG:", error);
            });
    })
}

// onMounted(() => {
//      draw()
// })
</script>